import * as echarts from '../../ec-canvas/echarts.js';

const APIKEY_L = "b9496db4ca924f92b05972d698596777";

Page({
  data: {
    airQualityIndex: "", // 空气质量指数
    airQualityLevel: "", // 空气质量级别
    pm25: "", // PM2.5值
    pm10: "", // PM10值
    o3: "", // O3值
    so2: "", // SO2值
    co: "", // CO值
    no2: "", // NO2值
    location: "", // 地点信息，从页面参数获取

    ec: {
      onInit: initChart, // 初始化 echarts 图表的方法
    }
  },

  onLoad(options) {
    const { airQualityIndex, airQualityLevel, pm25, pm10, o3, so2, co, no2, location } = options;
    this.setData({
      airQualityIndex,
      airQualityLevel,
      pm25,
      pm10,
      o3,
      so2,
      co,
      no2,
      location
    });

    // 请求空气质量每日预报数据
    this.getAirQualityForecast();
  },

  // 获取空气质量每日预报数据
  getAirQualityForecast() {
    var that = this;
    wx.request({
      url: 'https://devapi.qweather.com/v7/air/5d',
      data: {
        key: APIKEY_L,
        location: that.data.location
      },
      success(res) {
        var data = res.data;
        if (data.code === "200") {
          that.updateChart(data.daily); // 更新图表数据
        } else {
          wx.showToast({
            title: '获取空气质量每日预报失败',
            icon: 'none'
          });
        }
      },
      fail() {
        console.log('请求失败，地址：', 'https://devapi.qweather.com/v7/air/5d?key=' + APIKEY_L + "&location=" + that.data.location);
        wx.showToast({
          title: '获取空气质量每日预报失败',
          icon: 'none'
        });
      }
    });
  },

  // 更新图表数据
  updateChart(forecastData) {
    if (!chart) {
      return;
    }
    var categories = []; // x 轴数据，日期
    var aqiData = []; // y 轴数据，空气质量指数

    forecastData.forEach((item, index) => {
      var formattedDate = ''; // 格式化后的日期字符串
      if (index === 0) {
        formattedDate = '今天';
      } else if (index === 1) {
        formattedDate = '明天';
      } else {
        var dateParts = item.fxDate.split('-'); 
        formattedDate = dateParts[1] + '/' + dateParts[2]; // 组合成 MM/dd 格式
      }
      categories.push(formattedDate); // 使用格式化后的日期或 "今天"、"明天" 作为 x 轴数据
      aqiData.push(item.aqi); // 使用空气质量指数作为 y 轴数据
    });
  
    console.log('y轴数据：', aqiData);

    // 更新图表配置
    var option = {
      title: {
        text: '空气质量五天预报',
        left: 'center'
      },
      xAxis: {
        data: categories,
        axisLabel: {
          rotate: 0
        }
      },
      yAxis: {
        name: '空气质量指数',
        nameLocation: 'middle',
        nameGap: 30
      },
      series: [{
        type: 'bar',
        data: aqiData,
        // 柱形样式设置
        itemStyle: {
          color: '#4CAF50', // 柱形颜色
          opacity: 0.8,
          barBorderRadius: [5, 5, 0, 0],
          shadowBlur: 5,
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowOffsetX: 3,
          shadowOffsetY: 3
        }
      }]
    };

    // 设置图表配置并更新
    chart.setOption(option);
  },

  onShareAppMessage() {
    // 自定义分享内容
  }
});

let chart = null;

// 初始化 echarts 图表
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  return chart;
}
